<template>
  <div class="con">
    <el-container>
      <el-header>
        <div class="centerContainer">
          <div class="centerContainer">
            <svg style=" margin-top:7px;" t="1715563568582" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="1692" width="48" height="48">
              <path
                d="M1019.211144 512.942488c0 281.360557-228.092179 509.452736-509.452736 509.452736-281.370746 0-509.452736-228.092179-509.452736-509.452736 0-281.365652 228.08199-509.452736 509.452736-509.452737 281.360557 0 509.452736 228.087085 509.452736 509.452737"
                fill="#0f66e0" p-id="1693" data-spm-anchor-id="a313x.search_index.0.i0.70813a81Z07OnJ" class=""></path>
              <path
                d="M495.391841 725.786746l43.466507 37.888H377.580896c-111.55996 0-201.99801-90.432955-201.99801-201.99801a200.979104 200.979104 0 0 1 23.332935-94.320079 202.731622 202.731622 0 0 1 59.656915-68.913672 201.590448 201.590448 0 0 1 44.261254-24.484298l-16.378905-14.274866-1.237971-1.08004L174.640398 262.210229h145.89198l110.586906 96.388458 12.81783 11.182487-0.463602 0.891542c0.840597 0.285294 1.671005 0.585871 2.501413 0.891543l93.983841 81.92H377.596179c-15.961154 0-31.127562 3.459184-44.780895 9.669413a108.48796 108.48796 0 0 0-59.386906 69.158209 108.411542 108.411542 0 0 0-4.024677 29.364855c0 4.503562 0.275104 8.94599 0.804936 13.312 6.566846 53.477254 52.142488 94.890667 107.387542 94.890667h53.655562l64.1401 55.907343z"
                fill="#ffffff" p-id="1694" data-spm-anchor-id="a313x.search_index.0.i3.70813a81Z07OnJ" class=""></path>
              <path
                d="M895.821692 763.674746h-145.897075L642.31801 669.879403l-4.834707-4.213174-63.732537-55.560916-40.287522-35.111482h88.288159c16.404378 0 31.968159-3.652776 45.901692-10.204338 28.962388-13.587104 50.919801-39.630328 58.964059-71.241871 2.170269-8.558806 3.326726-17.52008 3.326727-26.746269 0-4.508657-0.280199-8.951085-0.81003-13.317094-6.561751-53.472159-52.137393-94.880478-107.382448-94.880478h-49.951841L504.714826 300.123701l-43.497075-37.913472h161.343682c111.554866 0 201.99801 90.43805 201.99801 201.987821a200.989294 200.989294 0 0 1-23.363503 94.360836 202.818229 202.818229 0 0 1-60.747144 69.693134l4.335443 3.76995L895.821692 763.669652z"
                fill="#7dc5eb" p-id="1695" data-spm-anchor-id="a313x.search_index.0.i8.70813a81Z07OnJ" class="selected">
              </path>
            </svg>
            <div ref="logo" class="logo-span-1" @mouseenter="startLogoAnimation" @mouseleave="stopLogoAnimation">
              Carot
            </div>
          </div>
          <div class="navContainer">
            <el-button class="el-button-nav">
              首页
            </el-button>
            <!-- <el-button class="el-button-nav">
              首页
            </el-button>
            <el-button class="el-button-nav">
              首页
            </el-button> -->
            <el-button class="el-button-nav" @click="test">
              管理员入口
            </el-button>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="advertisement">
          <!-- 广告引语 -->
          <div>
            <TextHoverEffect class="div-h1" :text="logo"></TextHoverEffect>
            <div class="div-h2">专业 品质 免费</div>
            <div class="div-h3">靠谱稳定的服装店综合管理系统</div>
          </div>
          <div class="login-card">
            <div v-if="isAdmin">
              <button class="back" @click="back">返回</button>
              <div class="adminLoginSpan">管理员登录</div>
              <el-input class="el-input-c" prefix-icon="el-icon-user-solid" v-model="adminLogin.account"
                placeholder="请输入邮箱">
              </el-input>
              <div class="pr">
                <el-input class="el-input-c" prefix-icon="el-icon-key" v-model="adminLogin.password" placeholder="请输入密码"
                  show-password>
                </el-input>
              </div>
              <div class="to-button-box">
                <el-button @click="confirmAdminLogin" class="to-button">
                  登录
                </el-button>
              </div>
            </div>
            <div v-else><!-- 登录 注册 选择盒子 -->
              <div class="login-text-box">
                <el-button style="margin-left: 0px;" v-show="!isResister" class="login-text-nr"
                  @click="toRegister">注册</el-button>
                <el-button style="margin-left: 0px;" v-show="isResister" class="login-text-r"
                  @click="toRegister">注册</el-button>
                <div class="verticalBar"></div>
                <el-button style="margin-left: 0px;" v-show="!isLogin" class="login-text-nr"
                  @click=toLogin>登录</el-button>
                <el-button style="margin-left:0px;" v-show="isLogin" class="login-text-r" @click=toLogin>登录</el-button>
              </div>
              <!-- 注册页面卡片 -->
              <div v-show="isResister">
                <el-input class="el-input-c" prefix-icon="el-icon-user-solid" v-model="userResister.email"
                  placeholder="请输入邮箱"></el-input>
                <div class="pr">
                  <el-input class="el-input-c" prefix-icon="el-icon-key" v-model="userResister.code" maxlength="6"
                    placeholder="请输入验证码">
                  </el-input>
                  <button @click="getRegisterCode" class="code-btn" :disabled="!showCodeR">
                    <span v-show="showCodeR">发送验证码</span>
                    <span v-show="!showCodeR" class="count">{{ countRegister }} s</span>
                  </button>
                </div>
                <div class="to-button-box">
                  <el-button @click="confirmRegister" class="to-button" style="margin-top: 30px;">
                    注册
                  </el-button>
                </div>
              </div>
              <!-- 密码登录卡片 -->
              <div v-show="isLogin">
                <el-input class="el-input-c" prefix-icon="el-icon-user-solid" v-model="userLogin.email"
                  placeholder="请输入邮箱">
                </el-input>
                <div class="pr">
                  <el-input class="el-input-c" prefix-icon="el-icon-key" v-model="userLogin.password"
                    placeholder="请输入密码" show-password>
                  </el-input>
                </div>
                <div class="y-login-box">
                  <span class="y-login" @click="toEmailLogin">验证码登录</span>
                </div>
                <div class="to-button-box">
                  <el-button @click="goLogin" class="to-button">
                    登录
                  </el-button>
                </div>
              </div>
              <!-- 邮箱登录卡片 -->
              <div v-show="isEmailLogin">
                <el-input class="el-input-c" prefix-icon="el-icon-user-solid" v-model="userEmailLogin.email"
                  placeholder="请输入邮箱"></el-input>
                <div class="pr">
                  <el-input class="el-input-c" prefix-icon="el-icon-key" v-model="userEmailLogin.code" maxlength="6"
                    placeholder="请输入验证码"></el-input>
                  <button @click="getLoginCode" class="code-btn" :disabled="!showCodeL">
                    <span v-show="showCodeL">发送验证码</span>
                    <span v-show="!showCodeL" class="count">{{ countLogin }} s</span>
                  </button>
                </div>
                <div class="to-button-box">
                  <el-button @click="loginCode" class="to-button" style="margin-top: 30px;">
                    登录
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </el-main>
      <el-backtop :visibility-height="50"></el-backtop>
    </el-container>

  </div>

</template>

<script>
const TIME_COUNT = 60 // 倒计时的时间
import 'animate.css';
import TextHoverEffect from '../components/TextHoverEffect.vue'
import { request } from '@/network/request/request'
export default {
  name: 'HomeView',
  data() {
    return {
      logo: 'Carot',
      isResister: false,
      isAdmin: false,
      isLogin: true,
      isEmailLogin: false,
      showCodeL: true,
      showCodeR: true,
      userResister: {
        email: '',
        code: '',
      },
      userLogin: {
        email: '',
        password: '',
      },
      adminLogin: {
        account: '',
        password: '',
      },
      userEmailLogin: {
        email: '',
        code: '',
      },
      countLogin: '',
      countRegister: '',
      timer: null,

    }
  },
  components: {
    TextHoverEffect: TextHoverEffect
  },
  methods: {
    startLogoAnimation() {
      // 添加动画类  
      this.$refs.logo.classList.add('animate__animated', 'animate__swing');
    },
    stopLogoAnimation() {
      // 移除动画类  
      const toRemove = ['animate__animated', 'animate__swing'];
      toRemove.forEach(className => {
        this.$refs.logo.classList.remove(className);
      });
    },
    goLogin() {
      const params = {
        email: this.userLogin.email,
        password: this.userLogin.password,
      };
      const config = {
        url: "api/user/login",
        method: "get",
        params: params,
      };
      request(config)
        .then((res) => {
          if (res.data.code === 1) {
            localStorage.setItem("email", res.data.data.email);
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("password", this.userLogin.password);
            this.$message.success("登录成功");
            this.$router.push('/workPlaceView/storeMange');
          } else {
            this.$message.error("登录失败，请检查账号和密码")
          }
        })
        .catch((error) => {
          console.log(error);
        });

    },
    //验证码倒计时
    getLoginCode() {
      // 验证码倒计时
      if (!this.timer) {
        console.log("发送code");
        if (this.userEmailLogin.email !== null && this.userEmailLogin.email !== '') {
          this.codeRequest(this.userEmailLogin.email);
          this.countLogin = TIME_COUNT
          this.showCodeL = false
          this.timer = setInterval(() => {
            if (this.countLogin > 0 && this.countLogin <= TIME_COUNT) {
              this.countLogin--
            } else {
              this.showCodeL = true
              clearInterval(this.timer)
              this.timer = null
              this.showCodeErrorR = false;
            }
          }, 1000)
        } else {
          this.$message.error("请输入邮箱!")
        }
      } else {
        this.codeRepeatMessage();
      }
    },
    confirmRegister() {
      if (this.userResister.code === '' || this.userResister.code === null || this.userResister.email === '' || this.userResister.email === null) {
        this.$message.error("检查邮箱和验证码是否为空！")
        return;
      }
      const params = {
        email: this.userResister.email,
        code: this.userResister.code,
      };
      const config = {
        url: "api/user/register",
        method: "get",
        params: params,
      };
      request(config)
        .then((res) => {
          if (res.data.code === 1) {
            this.$message.success("注册成功，初始密码是123456，请及时更换密码");
            this.userResister.email = '';
            this.userResister.code = '';
            this.toLogin();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getRegisterCode() {
      // 验证码倒计时
      console.log("发送code");
      if (!this.timer) {
        //timer
        if (this.userResister.email !== null && this.userResister.email !== '') {
          this.codeRequest(this.userResister.email);
          this.countRegister = TIME_COUNT;
          this.showCodeR = false;
          this.timer = setInterval(() => {
            if (this.countRegister > 0 && this.countRegister <= TIME_COUNT) {
              this.countRegister--
            } else {
              this.showCodeR = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        } else {
          this.$message.error("请输入邮箱!")
        }
      } else {
        this.codeRepeatMessage();
      }

    },
    codeRepeatMessage() {
      const errorText = this.$createElement;
      this.$notify({
        message: errorText('i', { style: 'font-size : 20px;' + 'color:#0f66e0;' + 'font-style: normal;' + 'font-weight:bold;' }, '请勿重复发送验证码'),
        duration: 3000
      });

    },
    back() {
      this.isAdmin = false;
    },
    toRegister() {
      this.isResister = true;
      this.isEmailLogin = false;
      this.isLogin = false;
    },
    toLogin() {
      this.isResister = false;
      this.isLogin = true;
      this.isEmailLogin = false;
    },
    toEmailLogin() {
      this.isEmailLogin = true;
      this.isLogin = false;
      this.isResister = false;
    },
    codeRequest(email) {
      const params = {
        email: email
      };
      const config = {
        url: "api/user/code",
        method: "get",
        params: params,
      };
      request(config)
        .then((res) => {
          if (res.data.code === 1) {
            this.$message.success("验证码发送成功，请耐心等待");
          } else {
            this.$message.error(res.data.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });

    },
    loginCode() {
      if (this.userEmailLogin.code === '' || this.userEmailLogin.code === null || this.userEmailLogin.email === '' || this.userEmailLogin.email === null) {
        this.$message.error("检查邮箱和验证码是否为空！")
        return;
      }
      const params = {
        email: this.userEmailLogin.email,
        code: this.userEmailLogin.code,
      };
      const config = {
        url: "api/user/emailLogin",
        method: "get",
        params: params,
      };
      request(config)
        .then((res) => {
          if (res.data.code === 1) {
            this.$message.success("登录成功");
            localStorage.setItem("email", this.userEmailLogin.email);
            localStorage.setItem("password", this.userLogin.password);
            localStorage.setItem("token", res.data.data.token);
            this.$router.push('/workPlaceView/storeMange')
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    test() {
      this.isAdmin = true;
    },
    confirmAdminLogin() {
      const params = {
        account: this.adminLogin.account,
        password: this.adminLogin.password,
      };
      const config = {
        url: "api/admin/login",
        method: "get",
        params: params,
      };
      request(config)
        .then((res) => {
          if (res.data.code === 1) {
            localStorage.setItem("account", this.adminLogin.account);
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("adminPass", this.adminLogin.password);
            this.$message.success("登录成功");
            this.$router.push("/adminWorkplace/adminStore");
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }
}
</script>

<style>
body {
  color: white;

}

.adminLoginSpan {
  margin-top: 15px;
  font-size: 24px;
  margin-bottom: 15px;
  margin-left: 60px;
  color: rgb(255, 255, 255);
  background-color: transparent;
  font-weight: bold;
}

.back {
  margin-left: 25px;
  margin-right: 10px;
  margin-top: 25px;
  background-color: transparent;
  color: rgb(222, 222, 222);
  font-size: 22px;
  font-weight: bold;
  border: 0cap;
}

.back:hover {
  cursor: pointer;
  color: white
}

/* 导航栏按钮样式 */
.el-button-nav:hover:after {
  left: 0%;
  right: 0%
}

.centerContainer {
  display: flex;
  align-content: center;
  /* justify-content: center; */
}

.navContainer {
  display: flex;
  align-content: center;
  margin-left: 30%;
  margin-top: 7px;
}

.el-button-nav {
  color: white;
  background-color: transparent;
  border: 0cap;
  font-weight: bold;
  font-size: 18px;

  text-decoration: none;
  position: relative;
  padding: 10px
}

.el-button-nav:hover {
  color: white;
  background-color: transparent;
  border: 0cap;
  font-weight: bolder;
  font-size: 22px;
}

.el-button-nav:after {
  border-bottom: 2px solid #ffffff;
  left: 51%;
  right: 51%;
  bottom: 0px;
  transition: all .2s;
}

.el-button-nav:after {
  content: '';
  position: absolute
}

/* 密码登录验证码登录切换样式 */
.y-login {
  cursor: pointer;
  margin-left: 240px;
}


.y-login:hover {
  text-decoration: underline;
  color: #cbf4ff;
}

/* 登录注册按钮样式 */
.to-button {
  margin-top: 10px;
  width: 280px;
  height: 70pX;
  color: rgb(0, 104, 221);
  border-radius: 8px;
  font-size: 24px;
  font-weight: bold;
}

.to-button:hover {
  font-size: 26px;
}

.to-button-box {
  margin-top: 10px;
  display: flex;
  align-content: center;
  justify-content: center;
}

/* 登录注册卡片样式 */
.login-card {
  margin-top: 40px;
  margin-left: 220px;
  height: 400px;
  display: block;
  width: 380px;
  border-radius: 4%;
  background-color: rgb(25, 81, 201);
  width: 32.28125%;
}

.verticalBar {
  width: 2px;
  height: 19px;
  background: rgb(255, 255, 255);
  display: inline-block;
  margin-top: 60px;
  vertical-align: top;
  margin-right: 18px;
  margin-left: 18px;
}

/* 登录注册切换按钮样式 */
.login-text-box {
  display: flex;
  align-content: center;
  justify-content: center;
}

.login-text-nr {
  margin-top: 45px;
  font-size: 28px;
  margin-bottom: 20px;
  color: rgb(222, 222, 222);
  background-color: transparent;
  border: 0cap;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  padding: 10px
}

.login-text-nr:hover {
  color: white;
  background-color: transparent;
}

.login-text-nr:focus {
  color: white;
  background-color: transparent;
}

.login-text-r {
  margin-top: 45px;
  font-size: 28px;
  margin-bottom: 20px;
  color: rgb(255, 255, 255);
  background-color: transparent;
  border: 0cap;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  padding: 10px
}

.login-text-r:hover {
  color: white;
  background-color: transparent;
}

.login-text-r:focus {
  color: white;
  background-color: transparent;
}

.el-header {
  /* position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; */
  /* 确保导航栏在其他内容之上 */
  background-color: transparent;
  line-height: 1.5;

}

.logo-span-1 {
  margin-top: 12px;
  font-size: 26px;
  font-weight: bold;
  font-family: "微软雅黑", "PingFangM", Arial, sans-serif;

}

.con {
  color: white;
  background-image: url('../resources/bg.png');
  /* background-color: blue; */
  background-size: 100%;
  /* 背景图片覆盖整个元素 */
  /* 设置宽度和高度为 100% 以填满其父元素   */
  background-repeat: no-repeat;
  height: 800px;
  width: 100%;
}

.advertisement {
  display: flex;
}


/* 输入框样式 */
.el-input-c {
  padding-left: 12px;
  font-size: 18px;
  margin: 10px;
  height: 45px;
  width: 260px;
  margin-left: 65px;
}

.el-input-c .el-input__inner {
  font-size: 18px;
  color: #ffffff;
  background-color: transparent;
  border: none;
  /* 移除四个边框 */
  border-bottom: 1px solid #8bc7e8;
  /* 设置下边框 */
}

.el-input-c .el-input__inner:hover {
  font-size: 18px;
  color: #ffffff;
  background-color: transparent;
  border: none;
  /* 移除四个边框 */
  border-bottom: 1.5px solid #ffffff;
  /* 设置下边框 */
}

.el-input__icon {

  height: 0%;
  width: 30px;
  text-align: center;
  transition: all .3s;
  line-height: 40px;
}

/* 验证码按钮样式 */
.pr {
  position: relative;
}

.cont {
  margin-top: 40px;
}

.code-btn {
  width: 100px;
  height: 34px;
  position: absolute;
  top: 11px;
  right: 5px;
  z-index: 222;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  padding-left: 16px;
  background-color: transparent;
  margin-right: 60px;
  cursor: pointer;
}

.code-btn:hover {
  color: #dfdfdf;
}

/* 标题样式 */
.div-h1 {
  margin: 20px;
  font-size: 50px;
  font-weight: bold;
}

.div-h2 {
  margin: 20px;
  font-size: 40px;
  font-weight: bold;
}

.div-h3 {
  margin: 20px;
  font-size: 30px;
  font-weight: bold;
}
</style>
